<template>
	<view class="order-segment-page">
		<!-- 分段器 -->
		<view class="segment-control">
		  <view
			:class="currentSegment === 1 ? 'segment-item active' : 'segment-item'"
			@click="switchSegment(1)">
			订单列表
		  </view>
		  <view
			:class="currentSegment === 2 ? 'segment-item active' : 'segment-item'"
			@click="switchSegment(2)">
			我的订单
		  </view>
		</view>
		<!-- 订单列表 -->
		<view v-if="currentSegment === 1" class="order-list">
		  <view v-for="(order, index) in orderList" :key="index" class="order-item">
			<view class="order-info">
			  <view class="address">
				<text class="label">出发地：</text>
				<text>{{ order.startAddress }}</text>
				<!-- 导向箭头 -->
				<text class="arrow"> → </text>
				<text class="label">目的地：</text>
				<text>{{ order.endAddress }}</text>
			  </view>
			  <view class="time">
				<text class="label">时间：</text>
				<text>{{ order.startTime }}</text>
			  </view>
			  <view class="status-btn-wrap">
				<text class="label">状态：</text>
				<text :class="order.orderStatus === '1' ? 'status-pending' : order.orderStatus === '2' ? 'status-accepted' : 'status-completed'">
				  {{ getStatusText(order.orderStatus) }}
				</text>
				<button class="action-btn" @click="grabOrder(order)">
				  抢单
				</button>
			  </view>
			</view>
		  </view>
		  <view v-if="orderList.length === 0" class="empty-tip">暂无订单</view>
		</view>
		<!-- 我的订单列表 -->
		<view v-if="currentSegment === 2" class="order-list">
		  <view v-for="(myOrder, index) in myOrderList" :key="index" class="order-item">
			<view class="order-info">
			  <view class="address">
				<text class="label">出发地：</text>
				<text>{{ myOrder.startAddress }}</text>
				<!-- 导向箭头 -->
				<text class="arrow"> → </text>
				<text class="label">目的地：</text>
				<text>{{ myOrder.endAddress }}</text>
			  </view>
			  <view class="time">
				<text class="label">时间：</text>
				<text>{{ myOrder.startTime }}</text>
			  </view>
			  <view class="time">
				<text class="label">用户电话：</text>
				<text>{{ myOrder.phonenumber }}</text>
			  </view>
			  <view v-if="myOrder.orderStatus === '4'">
					<text class="label">完成时间：</text>
					<text>{{ myOrder.endTime }}</text>
			  </view>
			  <view class="status-btn-wrap">
				<view class="action-text-group">
					<text class="label">状态：</text>
					<text :class="myOrder.orderStatus === '1' ? 'status-pending' : myOrder.orderStatus === '2' ? 'status-accepted' : 'status-completed'">
					  {{ getStatusText(myOrder.orderStatus) }}
					</text>
				</view>
				<view class="action-btns-group">
					<button v-if="myOrder.orderStatus === '2' " class="action-btn1" style="color:blue" @click="cancelOrder(myOrder)">
					  退单
					</button>
					<button v-if="myOrder.orderStatus !== '4'" class="action-btn1" style="color:chocolate" @click="completeOrder(myOrder)">
					  完成
					</button>
				</view>
			  </view>
			</view>
		  </view>
		  <view v-if="myOrderList.length === 0" class="empty-tip">暂无我的订单</view>
		</view>
	</view>
</template>

<script>
	import { listDriverOrders, grabOrder, cancelOrder,completeOrder } from '@/api/driver/driver';
	export default {
	  data() {
	    return {
		  currentSegment: 1,
		  orderList: [] ,// 订单列表
		  myOrderList: []
	    };
	  },
	
	  onLoad() {
		this.getOrderList();
	  },
	
	  methods: {
	    // 切换标签页
		switchSegment(segment) {
		  this.currentSegment = segment;
		  // 切换后加载对应数据
		  this.fetchCurrentSegmentData();
		},
		// 根据当前标签页加载对应数据
		fetchCurrentSegmentData() {
		  if (this.currentSegment === 1) {
			  // 加载全部订单
			  this.getOrderList();
		  } else {
			  // 加载我的订单
			  this.getMyOrderList();
		  }
		},
		// 订单状态文字映射
		getStatusText(orderStatus) {
		  const statusMap = {
			'1': '待接单',
			'2': '已接单',
			'4': '已完成',
		  };
		  return statusMap[orderStatus] || '未知';
		},
		//全部订单列表
		async getOrderList() {
		  try {
			const res = await listDriverOrders(1);
			this.orderList = res.rows || [];
		  } catch (err) {
			uni.showToast({ title: '查询订单失败', icon: 'none' });
		  }
		},
		//全部订单列表
		async getMyOrderList() {
		  try {
			const res = await listDriverOrders(2);
			this.myOrderList = res.rows || [];
		  } catch (err) {
			uni.showToast({ title: '查询订单失败', icon: 'none' });
		  }
		},
		//抢单方法
		async grabOrder(order) {
		  try {
			  // 抢单：调用抢单接口
			  await grabOrder(order.orderId);
			  uni.showToast({ title: '抢单成功', icon: 'success' });
			  // 刷新订单列表
			  this.getOrderList();
		  } catch (err) {
			uni.showToast({ title: '操作失败', icon: 'none' });
		  }
		},
		//退单方法
		async cancelOrder(order) {
		  try {
			  // 抢单：调用抢单接口
			  await cancelOrder(order.orderId);
			  uni.showToast({ title: '退单成功', icon: 'success' });
			  // 刷新订单列表
			  this.getMyOrderList();
		  } catch (err) {
			uni.showToast({ title: '操作失败', icon: 'none' });
		  }
		},
		//完成方法
		async completeOrder(order) {
		  try {
			  // 调用完成接口
			  await completeOrder(order.orderId);
			  uni.showToast({ title: '已完成', icon: 'success' });
			  // 刷新订单列表
			  this.getMyOrderList();
		  } catch (err) {
			uni.showToast({ title: '操作失败', icon: 'none' });
		  }
		}
	  }
	};
</script>

<style>
	.order-segment-page {
	  padding: 15px;
	}
	
	.segment-control {
	  display: flex;
	  margin-bottom: 15px;
	}
	
	.segment-item {
	  flex: 1;
	  text-align: center;
	  padding: 8px 0;
	  border: 1px solid #007aff;
	  border-radius: 4px;
	  margin-right: 5px;
	  color: #007aff;
	}
	
	.segment-item:last-child {
	  margin-right: 0;
	}
	
	.segment-item.active {
	  background-color: #007aff;
	  color: #fff;
	}
	
	.order-list {
	  background-color: #fff;
	  border-radius: 8px;
	  padding: 10px;
	}
	
	.order-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10px 0;
	  border-bottom: 1px solid #eee;
	}
	
	.order-item:last-child {
	  border-bottom: none;
	}
	
	.order-info {
		display: flex;
	  flex-direction: column;
	  gap: 8px;
	  font-size: 16px;
	  flex: 1;
	}
	
	.order-info .orderStatus {
	  margin-bottom: 8px;
	  font-size: 14px;
	}
	
	.order-status {
	  font-size: 14px;
	}
	
	.grab-btn {
	  background-color: #007aff;
	  color: #fff;
	  padding: 4px 10px;
	  border-radius: 4px;
	  font-size: 14px;
	}
	
	.empty-tip {
	  text-align: center;
	  padding: 20px 0;
	  color: #999;
	}
	/* 包裹状态和按钮的容器，实现一行显示 + 靠右 */
	.status-btn-wrap {
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /* 内容靠右 */
	  flex: 1;
	  gap: 0; /* 状态和按钮之间的间距 */
	}
	/* 调整按钮样式，与截图1更相似 */
	.action-btn {
	  padding: 6px 12px;
	  border-radius: 4px;
	  font-size: 14px;
	  background-color: #fff;
	  color: #007aff;
	  border: 1px solid #007aff;
	}
	
	.action-btns-group {
	  display: flex;
	  gap: 8px; /* 退单和完成按钮之间的间距 */
	}
	.action-text-group {
	  display: flex;
	  gap: 1px; /* 退单和完成按钮之间的间距 */
	}
	
	.action-btns-group {
	  display: flex;
	  gap: 8px; /* 退单和完成按钮之间的间距 */
	}
	
	/* 调整按钮样式，与截图更相似 */
	.action-btn1 {
	  padding: 6px 12px;
	  border-radius: 4px;
	  font-size: 14px;
	  background-color: #fff;
	  border: 1px solid #007aff;
	}
	
	/* 状态文字颜色（与截图1保持一致） */
	.status-pending {
	  color: green; /* 待接单绿色 */
	}
	.status-accepted {
	  color: green; /* 已接单蓝色 */
	}
	.status-completed {
	  color: hotpink; /* 已接单蓝色 */
	}
</style>